import indexTpl from "../views/index.art";
import userTpl from "../views/users.art";
import userListTpl from "../views/user-list.art";
import userUpdateTpl from "../views/update-user.art";

//引入分页功能模块
import pagination from "../components/pagination.js";
//引入公共事件模块
import page from "../dataBus/page.js";

//渲染全局模板
const indexHtml=indexTpl({});
const userHtml=userTpl({});

//全局变量
let dataList=[];//用户列表所有数据
let pageSize=page.pageSize;//每页展示多少条数据
let currentPage=page.currentPage;//当前页码


//事件监听部分
//添加用户点击保存按钮事件触发
const _signup=()=>{
    let $btnClose=$("#users-close");
    let data=$("#users-form").serialize();
    // console.log(data);
    $.ajax({
        url:"/api/users",
        type:"post",
        headers:{
            "X-Access-Token":localStorage.getItem("lg-token")||""
        },
        data:data,
        success(){
            // console.log(res);
            _loadData(1);
            document.getElementById("users-form").reset();//原生js方法--重置表单数据
        }
    });
    $btnClose.click();
};
//获取最新用户数据列表渲染
const _loadData=(currentPage)=>{
    $.ajax({
        url:"/api/users",
        type:"get",
        headers:{
            "X-Access-Token":localStorage.getItem("lg-token")||""
        },
        success(res){
            dataList=res.data;
            // _userlist(currentPage);
            $("#user-list").html(userListTpl({
                data:res.data.slice((currentPage-1)*pageSize,(currentPage-1)*pageSize+pageSize),
                page:currentPage
            }));
            pagination(dataList,pageSize,currentPage);
        }
    });
};
//点击删除按钮事件监听
const _deleteUser=()=>{
    $("#user-list").on("click",".remove",function(){
        // console.log($(this).data("id"));
        $.ajax({
            url:"/api/users",
            type:"delete",
            headers:{
                "X-Access-Token":localStorage.getItem("lg-token")||""
            },
            data:{
                id:$(this).data("id")
            },
            success(){
                _loadData(page.currentPage);
                // console.log("删除后当前页：",currentPage);
            }
        });
    });
};
//点击修改按钮事件监听
const _updateUser=()=>{
    $("#user-list").on("click",".update",function(){
        $("#updateModal").html(userUpdateTpl({
            data:$(this).data("obj")
        }));
        $("#users-save-update").on("click",function(){
            let formData=$("#users-form-update").serialize();
            $.ajax({
                url:"/api/users",
                type:"put",
                headers:{
                    "X-Access-Token":localStorage.getItem("lg-token")||""
                },
                data:formData,
                success(){
                    _loadData(page.currentPage);
                }
            });
            $("#users-close-update").click();
        });
    });
};
//点击退出登录按钮事件监听
const _exitUser=()=>{
    $.ajax({
        url:"/api/users/exit",
        type:"get",
        headers:{
            "X-Access-Token":localStorage.getItem("lg-token")||""
        },
        success(res){
            localStorage.setItem("lg-token","");
            location.reload();
        }
    });
};
//实现观察者事件--模块之间事件联用
const _observable=()=>{
    //解决点击一次会触发两次的问题--先注销事件在绑定事件
    $("body").off("changePage").on("changePage",(e,index)=>{
        page.setCurrentPage(index);
        _loadData(page.currentPage);
    });
};

//页面渲染部分
//渲染首页页面
const index=(router)=>{
    return (req,res,next)=>{
        res.render(indexHtml);
        //window resize
        $(".wrapper").resize();
        //将内容填充
        $("#content").html(userHtml);
        //初始化获取用户数据列表--调用事件
        _loadData(currentPage);
        //点击保存按钮事件监听
        $("#users-save").on("click",_signup);
        //给删除按钮绑定事件--事件代理
        _deleteUser();
        //给修改那妞绑定事件--事件代理
        _updateUser();
        //点击退出登录按钮
        $("#user-signout").on("click",function(e){
            e.preventDefault();
            _exitUser();
        });
        _observable();
    };
};

export default index